<template>
  <scroll-view
    :scroll-y="true"
    :enable-back-to-top="true"
    :scroll-with-animation="true"
    class="content"
  >
    <view v-for="item in reSourece" :key="item.title" class="content-main">
      <image :lazy-load="true" class="content-main-icon" :src="item.img" />
      <view class="content-main-title" @tap="handleToPages(item.pageUrl)">
        <text>{{ item.title }}</text>
        <view class="right-icon" />
      </view>
    </view>
    <view v-if="hasAuth" class="login-out">
      <view @tap="handleLoginOut">
        退出登录
      </view>
    </view>
    <addBaby
      :is-opened.sync="isShowAddModal"
      :otherBaby="otherBaby"
      :have_three_babys="info.have_three_babys"
      @toggle-child="handleToggleChild"
    />
  </scroll-view>
</template>

<script>
import Taro from "@tarojs/taro";
import addBaby from "./add-baby-modal";
import {
  minePetal,
  myReflection,
  address,
  moreHelp,
  exchangeStore
} from "../image-url";
const reSourece = Object.freeze([
  {
    title: "我的花瓣&花朵",
    img: minePetal,
    pageUrl: "/pages/mine/petal/index"
  },
  {
    title: "我的成就",
    img: myReflection,
    pageUrl: "/pages/my-medal/index"
  },
  {
    title: "兑换商城",
    img: exchangeStore,
    pageUrl: "/pages/exchange-store/index"
  },
  {
    title: "收货地址",
    img: address,
    pageUrl: "/pages/shipping-address/index"
  },
  {
    title: "获取更多帮助",
    img: moreHelp,
    pageUrl: "/pages/help/index"
  }
]);
export default {
  props: {
    isShowAddBaby: { type: Boolean, default: false },
    /**是否登录 */
    hasAuth: { type: Boolean, default: false },

    otherBaby: { type: Array, default: () => [] },
    have_three_babys: { type: Boolean, default: false },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    addBaby
  },
  data() {
    return { reSourece, isShowAddModal: false };
  },
  watch: {
    isShowAddBaby: {
      handler: function(newVal) {
        this.isShowAddModal = newVal;
      },
      immediate: true
    }
  },
  methods: {
    handleToPages(pageUrl) {
      if (!pageUrl) return;
      const url = this.hasAuth ? pageUrl : `/pages/not-login/index`;
      Taro.navigateTo({ url });
    },
    handleLoginOut() {
      this.$emit("login-out");
    },
    handleToggleChild(data) {
      this.$emit("toggle-child", data);
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.content {
  flex: 1;
  overflow-x: hidden;
  &-main {
    padding: 0 32px;
    display: flex;
    align-items: center;
    height: 128px;
    &-icon {
      width: 44px;
      height: 44px;
      margin-right: 24px;
    }
    &-title {
      flex: 1;
      @include normal-flex;
      text {
        @include base-text(44px, 32px, #000000, 400);
        flex: 1;
      }
      .right-icon {
        width: 44px;
        height: 44px;
        @include setBgi("~@/assets/icon/right.png");
      }
    }
  }
  .login-out {
    position: fixed;
    bottom: 0;
    @include normal-flex;
    width: 100%;
    height: 104px;
    view {
      @include base-text(40px, 28px, #c0c4cc, 400);
    }
  }
}
</style>
